<template>
    <input @input="inputFn" type="text" :value="num">
</template>

<script>
// 目标：封装一个输入框组件,实现基于prop的双向绑定
import { ref, watch } from 'vue'
export default {
  props: {
    modelValue: {
      type: Number
    }
  },
  setup (props, { emit }) {
    const num = ref(props.modelValue)
    // 监听props里传进来的参数的变化
    watch(() => {
      return props.modelValue
    }, () => {
      num.value = props.modelValue
    }, { immediate: true })

    // 值组件input的输入事件
    function inputFn (e) {
      emit('update:modelValue', e.target.value)
    }
    return { num, inputFn }
  }
}
</script>

<style>

</style>
